<template>
	<div class="ShopCarHave">
		<div class="shopcarList">
			<ul>
				<li v-for="(item,index) of proList">
					<div class="title">
						<img src="~img/shopcar/shop_title.png">
						<h3>杭州保税区仓</h3>
					</div>
					<div 
						:class="[{swipeLeft:isSwipeList[index]},'listInfo']"
						ref="listInfo"
					>
						<div class="list-item">
							
							<label>
								<input 
									type="checkbox" 
									:checked="item.isChecked"
									@click="item.isChecked = !item.isChecked"
								>
								<b></b>
							</label>
							
							<img class="image" :src="item.imgUrl">
							
							<div class="message">
								<div class="des">
									<p>
										{{item.des}}
									</p>
								</div>
								<form>
									<button 
										@click.prevent="item.nums > 1 ? item.nums-- : 1"
									>
										-
									</button>
									<input 
										type="text" 
										:value="item.nums" 
										@blur="blur(index)"
										ref="num"
									>
									<button @click.prevent="item.nums++">+</button>
								</form>
							</div>
							
							<div class="price">{{item.price | Fixed | rmb}}</div>
						</div>
						<div class="list-delate" @click="remove(index)">删除</div>
					</div>
				</li>
			</ul>
		</div>
		<div class="balance">
			<ul class="btn">
				<li class="checkAll">
					<label>
						<input 
							type="checkbox" 
							:checked="isCheckedAll" 
							@click="checkAll"
							ref="checkAll"
						>
						<b></b>
					</label>
					<span>全选</span>
				</li>
				<li class="edit">
					<label>
						<input type="checkbox">
						<b></b>
					</label>
					<span>编辑</span>
				</li>
			</ul>
			<div class="summer">
				<p>合计:{{allTotal | Fixed | rmb}}</p>
				<p>(不含运费)</p>
			</div>
			<button class="submit">结算</button>
		</div>
	</div>
</template>
<script>
    export default {
		name:"ShopCarHave",
		data(){
			return{
				proList:[],
				isSwipeList:[]
			}
		},
		mounted(){
			const that = this
			this.proList = JSON.parse(localStorage.getItem("proList"))
			this.proList.forEach(function(item,i){
				that.isSwipeList.push(item.isSwipe)
			})
			
			this.$nextTick(function(){
				this.$refs.listInfo.forEach(function(element,index){
					let x,X
					element.addEventListener('touchstart',e=>{
						x = e.changedTouches[0].pageX
						
					})
					element.addEventListener('touchmove',e=>{
						X = e.changedTouches[0].pageX
						
						// 右往左滑动
						if(x-X > 10){
							that.isSwipeList.splice(index,1,true)
						}
						
						//左往右滑动
						if(X-x > 10){
							that.isSwipeList.splice(index,1,false)
						}
					})
				})
			})
		},
		filters:{
			Fixed(v){
				return parseInt(v).toFixed(2)
			},
			rmb(v){
				return "￥" + v
			}
		},
		methods:{
			blur(i){
				let val = parseInt(this.$refs.num[i].value)
				if(isNaN(val)){
					return this.$refs.num[i].value = 1
				}
				return this.$refs.num[i].value = val
			},
			checkAll(){
				const that = this
				this.proList.forEach(function(item,i){
					if(that.$refs.checkAll.checked){
						item.isChecked = true
					}else{
						item.isChecked = false
					}
				})
			},
			remove(i){
				this.proList.splice(i,1)
				localStorage.setItem("proList",JSON.stringify(this.proList))
			}
		},
		computed:{
			isCheckedAll(){
				let bool = true
				this.proList.forEach(function(item,i){
					if(!item.isChecked){
						bool = false
					}
				})
				return bool
			},
			allTotal(){
				let total = 0
				this.proList.forEach(function(item,i){
					if(item.isChecked){
						total += item.price * item.nums
					}
				})
				return total
			}
		}
	}
</script>
<style lang='stylus' scoped>
	.ShopCarHave
		height 100%
		.shopcarList
			height 100%
			padding-bottom 150px
			ul
				li
					width 100%
					overflow hidden
					.title
						display flex
						align-items center
						height 80px
						img
							width 36px
							height 35px
							margin-left 30px
							margin-right 25px
						h3
							font-size 28px
							color #aeaeae
					.swipeLeft
						transform translateX(-13%)
					.listInfo
						transition:all 0.3s linear
						width 115%
						height 208px
						background #fafafa
						display flex
						justify-content space-between
						.list-item
							width 100%
							height 100%
							display flex
							align-items center
							
							label
								width 42px
								height 42px
								display block
								margin 0 20px
								input
									display none
									&:checked+b
										background url('~img/shopcar/check.png') no-repeat
										background-size 42px
										
								b
									width 42px
									height 42px
									display block
									background url('~img/shopcar/check_none.png') no-repeat
									background-size 42px
									
							.image
								width 157px
								height 157px
							
							.message
								width 300px
								height 160px
								margin 0 20px
								.des
									p
										line-height 40px
										font-size 32.82px
										span
											font-size 28.13px
											color #999999
								form
									width 228px
									height 41px
									border-radius 3px
									border 3px solid #cccccc
									display flex
									background #fafafa
									button
										width 74px
										display block
										height 100%
										background none
										font-size 32px
										color #666666
									input
										width 79px
										display block
										height 100%
										border-left 3px solid #cccccc
										border-right 3px solid #cccccc
										background none
										font-size 32px
										text-align center
										color #666666
							
							.price
								width 154px
								text-align center
								
						.list-delate
							width 13%
							height 100%
							background #ff9900
							color #fff
							text-align center
							line-height 208px
							
							
		.balance
			width 100%
			height 115px
			position fixed
			bottom 103px
			display flex
			justify-content space-between
			align-items center
			background #fff
			.btn
				width 225px
				height 100%
				display flex
				justify-content space-between
				align-items center
				li
					width 50%
					text-align center
					label
						display block
						width 42px
						height 42px
						margin 0 auto
						input
							display none
						b
								display block
								width 42px
								height 42px
								background url("~img/shopcar/check_none.png")
								background-size 100%
					span
						display block
						margin-top 12px
				.checkAll
					label
						input
							&:checked+b
								background url("~img/shopcar/check.png")
								background-size 100%
						
						
			.summer
				text-align center
				p
					color #999999
					line-height 29px
			.submit
				width 232px
				height 115px
				background #ff5500
				color #fff
				text-align center
				line-height 115px
				display block
				font-size 37.5px
</style>
